<template>
  <div>
    <el-link v-model="direction" :underline="false">
      <el-link
        label="btt"
        :underline="false"
        @click="changedrawer"
        type="primary"
        style="margin-left: 4vw; color:red"
        >请选择 颜色分类 尺码
      </el-link>
    </el-link>
    <div class="bottom">
      <el-drawer
        title=""
        :visible.sync="$store.state.drawer"
        :direction="direction"
        size="45%"
      >
        <div class="top">
          <div class="img">
            <img :src="data.productsImg" alt="" />
          </div>
          <div class="text">
            <span>¥38-69</span>
            <p>库存1000件</p>
            <i>已选择</i>
            <i>{{ color }} </i>
            <i>{{ size }}</i>
          </div>
        </div>
        <div class="center">
          <p>
            <i>颜色 ：</i>
            <span
              v-for="item in list"
              :key="item"
              class="i"
              @click="color = item"
              :class="color == item ? 'active1' : ''"
              >{{ item }}</span
            >
          </p>
          <p>
            <i>尺码 ：</i>
            <span
              v-for="item in list1"
              :key="item"
              class="i"
              @click="size = item"
              :class="size == item ? 'active1' : ''"
              >{{ item }}</span
            >
          </p>
          <p><i>品牌 ：</i></p>
          <p>
            <i>购买数量 ：</i>
            <el-button size="mini" @click="add">+</el-button>
            <span class="count">{{ n }}</span>
            <el-button size="mini" @click="jian">-</el-button>
          </p>
          <div class="botton1" @click="AddShopCar()">
            {{ $store.state.name }}
          </div>
        </div>
      </el-drawer>
    </div>
  </div>
</template>

<script>
import { addCar } from "../../../api";
export default {
  props: ["data", "lis"],
  name: "TopicMessageBox",

  data() {
    return {
      list2: {},
      n: 0,
      // name:"加入购物车",
      color: "颜色",
      size: "尺码",
      drawer: false,
      direction: "btt",
      list: ["黑色", "白色", "红色", "粉色"],
      list1: ["39", "40", "41", "42", "43", "44"],
    };
  },
  methods: {
    changedrawer() {
      this.name = "加入购物车";
      this.$store.commit("SET_DRAWER", !this.$store.state.drawer);
    },
    AddShopCar() {
      console.log(this.$store.state.name);
        this.list2 = { ...this.lis[0] };

      if (this.$store.state.name === "加入购物车") {
        // console.log(this.list, "//");
        //
        const skuProp = { color: this.color, size: this.size };
        let skuProps = JSON.stringify(skuProp);
        addCar({
          productId: this.list2.productId,
          userId: this.$store.state.uid,
          productPrice: this.list2.productPrice,
          cartNum: this.n,
          skuProps:skuProps
        }).then((res) => {
          console.log(res);
        });
      } else {
        this.$router.push("/nonuse");
      }
      this.$store.commit("SET_DRAWER", !this.$store.state.drawer);
    },
    add() {
      this.n += 1;
      console.log(this.n);
    },
    jian() {
      if (this.n === 0) {
        this.n = 0;
      } else {
        this.n += -1;
      }
    },
  },
  mounted() {
    console.log(this.lis, "ddsd");
  },
  destroyed() {
    this.$store.commit("SET_DRAWER", false);
  },
};
</script>

<style scoped>
.botton1 {
  width: 91vw;
  height: 6vh;
  background: pink;
  text-align: center;
  line-height: 6vh;
  position: absolute;
  bottom: 1vh;
  left: 4vw;
  border-radius: 10px;
}
.center .count {
  border: 0;
}
.center b {
  border: 1px solid #000;
  padding: 2vw;
  font-size: 16px;
}
.active1 {
  border: 1px solid red !important;
}
element.style {
  height: 42%;
}
.center i {
  margin-left: 10px;
}
.center p span {
  color: #72767b;
  /* line-height: 10vh; */
  border: 1px solid #72767b;
  line-height: 4vh;
  padding: 1vw;
}

.center .i {
  color: #72767b;
  margin-left: 10px;
}
.center p {
  display: flex;
  height: 4vh;
  line-height: 4vh;
  margin-top: 1vh;
}
.top i {
  font-style: normal;
  font-size: 12px;
}
.top {
  display: flex;
  text-align: center;
}
.top span {
  font-size: 14px;
  color: red;
  line-height: 5vh;
}
.top p {
  margin-left: 6vw;
  font-size: 12px;
  color: #72767b;
}
.bottom /deep/.el-drawer__header {
  align-items: center;
  color: #72767b;
  display: flex;
  margin-bottom: -3px;
  padding: 2px 24px 0;
}
.img {
  width: 20vw;
  height: 10vh;
  margin-left: 10vw;
}
.img img {
  width: 100%;
}
.el-drawer {
  width: 100%;
  left: 0;
  right: 0;
  height: 50% !important;
}
element.style {
  height: 50vh;
}
</style>